<template>
	<view class="page" :style="{'--color': color}">
		<status-bar :title="title" ></status-bar>
		<view class="video " v-if="pageData.url_type == 0">
			<view class="audioPop" v-if="!vid" @click="isshowPlay"></view>
			<video id='my_video' 
			      preload='auto' 
				  :src="pageData.lesson_video" 
				  object-fit='cover'
				  :poster="pageData.lesson_cover?imgUrl + pageData.lesson_cover :'../../../static/coursePay/poster.jpg'" :show-center-play-btn='false'
				  @pause='playing = false' 
				  @fullscreenchange="playerFullScreen" 
				  @timeupdate='timeupdate' 
				  :controls='true' 
				  @click="showRate=false" 
				  @play='myPlay'>
				<cover-image @click="playTap" v-if='!playing' src="../../static/coursePay/icon/icon-pause.png" class="icon-pause"></cover-image>
				<cover-view class="txt-rate" @click.stop="showRate = true">{{ rate==1.0?"倍数":"x"+parseFloat(rate).toFixed(1) }}</cover-view>
				<cover-view class="rate-bg" :class="{right0: showRate}"></cover-view>
				<cover-view class="rate rate-05" @click.stop="playRate(0.5)" :class="{right0: showRate}">x0.5</cover-view>
				<cover-view class="rate rate-10" @click.stop="playRate(1.0)" :class="{right0: showRate}">x1.0</cover-view>
				<cover-view class="rate rate-15" @click.stop="playRate(1.5)" :class="{right0: showRate}">x1.5</cover-view>
				<cover-view class="rate rate-20" @click.stop="playRate(2.0)" :class="{right0: showRate}">x2.0</cover-view>
			</video>
		</view>

		<view class="row j-sa m-top20" v-if="pageData.url_type == 1">
			<view class="audioPop" v-if="pageData.order_status == 0 || !vid" @click="isshowPlay"></view>
			<audio :src="pageData.lesson_video" controls
				   :poster="imgUrl + pageData.lesson_cover" 
				   :name="pageData.lesson_title"
				   class="audio">
			</audio>
		</view>
		


		<cover-view class="mask1" v-if='showPay' @click='showPay = false'>
			<cover-view class="fee-box" @click.stop>
				
				<cover-view class="txt" v-if='parseFloat(pageData.lesson_free) > 0 && pageData.url_type == 0'>免费{{pageData.lesson_free}}秒观看，购买视频学习全程</cover-view>
				<cover-view class="txt" v-if='pageData.url_type == 1'>购买课程学习全程</cover-view>
				<cover-view class="txt" v-else>该课程不支持免费观看，购买视频学习全程</cover-view>
				<cover-view @click="toPay" v-if='pageData.order_status == 0' class="btnp" :style="{'background-color': color}">立即购买</cover-view>
				<cover-view @click="toPay" v-if='pageData.order_status == 2' class="btnp" :style="{'background-color': color}">课程续费</cover-view>
			</cover-view>
		</cover-view>


		<view class="content">
			<template v-if='pageData.lesson_title'>
				<view class="flex-box j-sb padding ">
					<text class="black size32 bold" >{{pageData.lesson_title}}</text>
					<view class="icon-box d-flex f-column a-center" @click="collect">
						<view class="iconfont icon-guanzhu1 size30 color_33" v-if="pageData.collect == 0"></view>
						<view class="iconfont icon-guanzhu3 size30" :style="{'color':color}" v-if="pageData.collect == 1"></view>
						<view class="txt_">收藏</view>
					</view>

				</view>
				<view class="spaLine"></view>
			</template>

			<template v-if='pageData.lesson_info'>
				<view class="padding">
					<text class="title flex ">
						<text class="left-tag" :style="{'--color': color}"></text>
						<text class="black size32 bold">课程介绍</text>
					</text>
					<view class="info" v-if='pageData.lesson_info'>{{pageData.lesson_info}}</view>
					<view class="" style="padding-top: 0;" v-if='pageData.order_status > 0'>
						<text class="overtime">有效时间 {{pageData.left_day>0?pageData.left_day:0}}天</text>
					</view>
				</view>
				<view class="spaLine"></view>
			</template>


			<view class="padding" v-if='RICHTXT'>
				<view class="title flex">
					<text class="left-tag" :style="{'--color': color}"></text>
					<text class="black size32 bold">课程详情</text>
				</view>
				<view class="richTxt m-top20">
					<mp-html :content="RICHTXT" lazy-load scroll-table selectable use-anchor show-with-animation />
				</view>
			</view>
		</view>


		<showModel @cancelFunc='showModal = false' goHome='0' v-if='showModal' type='2'></showModel>


       <view class="iconfont icon-fenlei color size48 " @click="goList" v-if="state == 1"></view>
	</view>
</template>

<script>
	let that;
	export default {
		data() {
			return {
				videoHttp: 'https://www.weikebaba.com/', // 视频域名
				showPay: false, //true 显示支付弹窗
				title:'详情',
				showModal: false,
				pageData: '',

				lesson_id: '',
				msg: '',
				imgUrl: this.imgUrl,
				RICHTXT: '',
				playing: false, //播放中
				url_lesson_id: '',
				
				currentTime: 0,
				isDefinitionBtnShow: true,
				stopPlaying: false, // 是否到达收费节点
				slideBar0: false, // 进度条是否重置为免费观看时长处
				countState: false, // 本次观看是否统计播放次数


				vid:uni.getStorageSync('vid'),
				service_tel: uni.getStorageSync('service_tel'),
				color: getApp().globalData.color,
				from_share: 0,
				showRate: false,
				rate: 1.0,


				url_type:0,  // 0 视频 1 音频
				order_status:0, // 1 买了的 0 没买
				state:0, // 1 从首页点击 0 从列表点击进来的
			}
		},
	
		onLoad(e) {
			that = this
			that.lesson_id = e.lid;
			that.url_lesson_id = e.lid
			that.getHomeData()
			if (e.share) that.from_share = e.share
			if(e.state)	that.state = e.state;
		},
		onReady() {
			this.videoCtx = uni.createVideoContext('my_video', this);
		},
		methods: {
			isshowPlay(){
				let vid = uni.getStorageSync('vid');
				if(!vid) return this.showModal = true;
				if(this.pageData.url_type == 1) this.showPay = true;
				
			},
			cancel() {
				that.ShowModel = false
				that.getHomeData()
			},
			
			playRate(rate) {
				this.videoCtx.playbackRate(rate);
				that.showRate = false
				that.rate = rate
			},
			
			
			
			myPlay() {
				if (that.stopPlaying) {
					that.videoCtx.seek(parseInt(that.pageData.lesson_free))
					that.pause_()
				} else {
					that.videoCtx.seek(parseInt(that.currentTime))
					that.play_()
				}
			},
			toPay() {
				let vid = uni.getStorageSync('vid')
				if(!vid) return this.showModal = true;
			
			},
			playerFullScreen(e) {
				if (e.detail.fullScreen) { //全屏
					this.isDefinitionBtnShow = false
				} else { //非全屏
					this.isDefinitionBtnShow = true
				}
			},
			playTap() {
				if (!this.playing) {
					this.play_()
				} else {
					this.pause_()
				}
			},
			play_() {
				console.log('播放视频');
				if (!that.stopPlaying) {
					that.playing = true;
					that.videoCtx.play()
				} else {
					setTimeout(() => {
						that.showPay = true
					}, 100)
				}
			},
			pause_() {
				that.playing = false;
				that.videoCtx.pause();
				if (that.stopPlaying) {
					setTimeout(() => {
						that.showPay = true
					}, 100)
				}
				// this.canvas()
			},
			timeupdate(e) {
				if (that.pageData.order_status != 1 && (e.detail.currentTime >= parseInt(that.pageData.lesson_free))) { // 未购买并且到达付费时间
					that.stopPlaying = true
					setTimeout(() => {
						that.showPay = true
					}, 100)
					if (!that.slideBar0) {
						that.videoCtx.seek(parseInt(that.pageData.lesson_free))
						that.slideBar0 = true
						that.pause_()
					}
				} else {
					that.stopPlaying = false
					that.slideBar0 = false
					that.currentTime = e.detail.currentTime;
					if (!that.countState && that.pageData.order_status == 1) { // 统计学习次数
						var time = 30,
							duration = e.detail.duration;
						if (duration < time) { //视频时长小于统计节点时播完算一次
							if (that.currentTime == duration)
								that.count()
						} else { //播到视频节点算一次
							if (that.currentTime >= time)
								that.count()
						}
					}
				}
			},
			count() {
				that.$http.post({
					url: '/zzj_singleSaleApi/lesson_play',
					data: {
						bid: uni.getStorageSync('bid'),
						v_id: uni.getStorageSync('vid'),
						lesson_id: that.lesson_id
					}
				}).then(res => {
					if(res.code != '100') return this.$Toast(res.msg);
					that.countState = true
				})
			},
			getHomeData() {
				that.noData = false;
				that.pageData = '';
				that.$http.get({
					url: '/zzj_singleSaleApi/lesson_detail',
					data: {
						bid: uni.getStorageSync('bid'),
						v_id: uni.getStorageSync('vid'),
						lesson_id: that.lesson_id
					}
				}).then(res => {
					that.showLoading = false
					that.title = res.data.lesson_title;
					if(res.code != '100') {
						that.noData = true
						that.msg = res.msg;
						return;
					}
					var capture = res.data.lesson_detail;
					if (capture) {
						that.RICHTXT = that.$common.richTxt(capture).html
					}
					if (res.data.lesson_video.indexOf('http') < 0) {
						res.data.lesson_video = that.videoHttp + res.data.lesson_video
					}
					that.pageData = res.data;
					if (res.data.buy_way == 2) {
						that.url_lesson_id = res.data.all_lesson
					}
					// #ifdef H5
					this.H5Share('pageType=1&id=' + that.lesson_id, {
						title: res.data.lesson_title ? res.data.lesson_title : '',
						desc: res.data.lesson_info ? res.data.lesson_info : '',
						imageUrl: res.data.lesson_cover ? that.imgUrl + res.data.lesson_cover : ''
					})
					// #endif
				})
			},

			collect() { // 收藏课程
				let vid = uni.getStorageSync('vid');
				if(!vid) return this.showModal = true;
				
				that.$http.get({
					url: '/zzj_singleSaleApi/collect_lesson',
					data: {
						bid: uni.getStorageSync('bid'),
						v_id: uni.getStorageSync('vid'),
						lesson_id: that.pageData.lesson_id,
						class_id: that.pageData.class_id
					}
				}).then(res => {
					if(res.code != '100') return this.$Toast(res.msg);
					that.pageData.collect = that.pageData.collect == 1 ? 0 : 1
				})
			},
			
			goList(){
				this.toUrl(`/pages/ply/plyList?id=${this.pageData.class_id}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon-fenlei{
		position: fixed;
		right: 30rpx;
		top:50%;
		transform: translate(0,-50%);
		z-index:888;
	}
	.audioPop{
			width:100%;
			height: 100%;
			position: absolute;
			background-color:rgba(0, 0, 0, 0);
			top:0;
			left:0;
			z-index:8888;
		}
	.sharebox {
		.qrImg {
			width: 500rpx;
			height: 890rpx;
			text-align: center;
			position: relative;
			max-height: 70vh;
		}

		.icon-close {
			width: 50rpx;
			display: block;
			margin: 30rpx auto 0;
			height: 50rpx;
		}

		.shareImgTxt {
			color: white;
			font-size: 28upx;
			text-align: center;
			margin-top: 20upx;
		}
	}

	.left-tag {
		display: inline-block;
		width: 8rpx;
		height: 36rpx;
		vertical-align: -6rpx;
		margin-right: 12rpx;
		background-color: var(--color);
	}

	#firstCanvas {
		position: absolute;
		top: 0;
		left: 20%;
		transform: scale(0.5);
		z-index: 99999999;
	}

	.video {
		height: 420rpx;
		position: relative;
		z-index: 9;

		video {
			width: 100%;
			height: 420rpx;
			z-index: 999;
			.icon-pause {
				position: absolute;
				top: 174rpx;
				left: 338rpx;
				width: 74rpx;
				height: 74rpx;
				z-index: 99999;
				animation: ss .9s linear infinite;
				animation-direction: alternate;
				-webkit-animation-direction: alternate;
			}

			.txt-rate {
				position: absolute;
				bottom: 114rpx;
				right: 30rpx;
				padding: 0 10rpx;
				line-height: 40rpx;
				border-radius: 40rpx;
				z-index: 9999;
				color: white;
				font-size: 24rpx;
				background-color: rgba(0, 0, 0, 0.5);
			}

			.rate-bg {
				width: 200rpx;
				height: 100%;
				position: absolute;
				right: 0;
				right: -220rpx;
				z-index: 99999;
				background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.5));
				transition: right 0.2s;
			}

			.rate {
				width: 200rpx;
				position: absolute;
				right: -220rpx;
				text-align: center;
				padding: 0 10rpx;
				line-height: 60rpx;
				height: 60rpx;
				z-index: 99999;
				box-sizing: border-box;
				color: white;
				transition: right 0.2s;
			}

			.right0 {
				right: 0;
			}

			.rate-05 {
				top: 70rpx;
			}

			.rate-10 {
				top: 130rpx;
			}

			.rate-15 {
				top: 190rpx;
			}

			.rate-20 {
				top: 250rpx;
			}
		}

		@keyframes ss {
			0% {
				opacity: 0.6;
				transform: scale(1);
			}

			100% {
				opacity: 0.7;
				transform: scale(1.07);
			}
		}
	}

	.mask1 {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, .8);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.content {
		padding: 0 0 120rpx;

		.info {
			// margin: 24rpx 0 0;
			text-align: justify;
		}

		.richTxt {
			background-color: #FFFFFF;
			text-align: justify;
			// margin-left: -$page-spacing;
			// margin-right: -$page-spacing;
		}

		.icon-box {
			margin-left: 20rpx;

			.icon {
				display: block;
			}

			.icon002 {
				color: $uni-color-primary;
				font-size: 44rpx;
				height: 44rpx;
				display: block;
			}

			.txt_ {
				color: #333333;
				font-size: 24rpx;
				text-align: center;
			}
		}


	}

	.padding {
		padding: $page-spacing $page-spacing;

		.title {
			display: block;
			margin-bottom: 10rpx;
		}
	}

	.btn-box {
		height: calc(116rpx + env(safe-area-inset-bottom));
		padding: 0 40rpx;
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-shadow: 0 0 3px 0 rgba(0, 0, 0, .1);

		.price {
			color: #FF0000;
			font-weight: 600;
			font-size: $uni-font-size-lg;
		}

		.btn {
			background-color: $uni-color-primary;
			width: 180rpx;
			line-height: 74rpx;
			height: 74rpx;
			border-radius: 74rpx;
			text-align: center;
			color: white;
		}
	}

	.overtime {
		line-height: 32rpx;
		background-color: #FEEFEF;
		border-radius: 32rpx;
		padding: 0 16rpx;
		color: #DE5858;
	}

	.fee-box {
		width: 500rpx;
		text-align: center;
		background-color: #FFFFFF;
		border-radius: 8rpx;
		padding: 60rpx 30rpx;

		.txt {
			text-align: center;
		}

		.btnp {
			font-size: $uni-font-size-base;
			background-color: $uni-color-primary;
			color: white;
			line-height: 74rpx;
			border-radius: 74rpx;
			width: 266rpx;
			margin: 60rpx auto 0;
		}
	}
</style>
